<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="onClick">点击</button>
  </div>
</template>

<script>
export default {
  name: "WatchDemo",
  data() {
    return {
      msg: "message"
    };
  },
  methods: {
    onClick() {
      this.msg = '更新后的内容';
    }
  },
  watch: {
    msg: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      deep: true,
      // immediate: true  // 立即监听
    },
    // 监听路由变化
    $route: {
      handler: function(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      // 深度观测监察
      deep: true
    }
  }
};
</script>

<style scoped></style>
